<template>
	<view class="w-process">
		<view class="header">
			<view class="unusedInvoice">
				<view class="title">未用票数</view>
				<view>2323 张</view>
			</view>
			<view class="unusedInvoice">
				<view class="title">总金额</view>
				<view>2323 </view>
			</view>
		</view>
		<scroll-view :show-scrollbar="false" :scroll-y="true" class="scroll">
			<view class="card-mini">
				<view class="card-mini-boxs">
					<!-- 识别月份 -->
					<view class="card-mini-title">10月</view>
					<view class="card-mini-content" @click="invoicesInfo">
						<!-- 发票信息 -->
						<view class="conten-header">
							<view class="headers">2024-10-22</view>
							<view class="headers" style="color: #579FFD;text-align: right;">{{ '增值税普通发票（卷票）' }}</view>
						</view>
						<view class="conten-seller">
							<view>销方： {{ '张家港市杨舍镇福前吕氏老鹅店' }}</view>
							<view>购方： {{ '爱丽家居科技股份有限公司' }}</view>
						</view>
						<view class="conten-status">
							<view class="status-list">
								<view class="status-card">已用</view>
								<view class="status-card">未用</view>
								<view class="status-card">验真</view>
								<view class="status-card">正常</view>
							</view>
							<view class="status-money">¥ {{ '75000' }}</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
// 点击查看发票详情
const invoicesInfo = () => {
	uni.navigateTo({
		url: '/pages/invoiceAssistant/invoiceDetails'
	});
}
</script>

<style lang="less" scoped>
.w-process {
	width: 100%;
	height: calc(100vh - 88rpx);
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background-color: #F5F5f5;

	.header {
		width: 100%;
		height: 80rpx;
		background-color: #33C5B9;
		display: flex;
		flex-direction: row;
		padding: 0 20rpx;

		.unusedInvoice {
			width: 50%;
			line-height: 80rpx;
			font-size: 30rpx;
			color: #fff;
			display: flex;

			.title {
				width: auto;
				padding-right: 26rpx;
			}
		}
	}
}

.scroll {
	flex: 1;
	margin-top: 20rpx;
}

/* 页面元素过多时样式 */
.card-mini {
	height: 100%;
	width: 100%;
	background-color: #F5F5F5;
}

.card-mini-boxs {
	height: auto;
	width: 100%;

	.card-mini-title {
		margin-top: 10rpx;
		height: 60rpx;
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;
	}

	.card-mini-content {
		background: #fff;
		border-radius: 16rpx;
		margin: 0 12rpx;
		padding: 8rpx 20rpx;
		box-shadow: 0rpx 0rpx 8rpx 0 #A5A5A5;

		.conten-header {
			height: 70rpx;
			line-height: 70rpx;
			width: 100%;
			display: flex;
			box-sizing: border-box;
			border-bottom: 2rpx solid #F5F5F5;

			.headers {
				width: 50%;
				line-height: 80rpx;
				font-size: 24rpx;
				color: #A3ACC3;
				text-align: left;
			}
		}

		.conten-seller {
			line-height: 45rpx;
			border-bottom: 2rpx solid #F5F5F5;
			font-size: 26rpx;
			text-align: left;
			padding: 15rpx 0;
		}

		.conten-status {
			height: 70rpx;
			display: flex;
			flex-direction: row;

			.status-list {
				flex: 1;
				display: flex;
				margin-top: 15rpx;

				.status-card {
					width: auto;
					padding: 0 10rpx;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 24rpx;
					text-align: center;
					border-radius: 20rpx;
					color: #FFB76A;
					border: 2rpx solid #FFB76A;
					margin-right: 10rpx;
				}
			}

			.status-money {
				width: 30%;
				line-height: 70rpx;
				text-align: right;
				font-size: 34rpx;
				color: #33C5BA;
				font-weight: 600;
			}
		}
	}
}
</style>
